<script lang="ts" setup>
import { useI18n } from "vue-i18n";
import { onMounted, ref } from "vue";
const { t } = useI18n();
import { UserStore } from "@/store";
import { WalletAxios } from "@/api";
const userStore = UserStore();
const bankData: any = ref({
  cnpjId: "",
  cpfId: "",
  email: "",
  evp: "",
  name: "",
  phone: "",
});

onMounted(async () => {
  //查询获取绑定的银行卡
  if (userStore.isLogin) {
    const data = await WalletAxios.getPaymentInfo();
    bankData.value = data.paymentInfo;
  }
});
</script>
<template>
  <!-- 用户设置列表 -->
  <div class="accout-list-frame">
    <div class="list-frame df ai-center jc-space-between">
      <div class="df ai-center">
        <img class="left-img" src="@/image/new_img/home/user_img/user_bai.png" />
        <div class="title-frame">{{ t("userSet.name") }}</div>
      </div>
      <div class="right-frame">
        {{ bankData.name !== "" ? bankData.name : "--" }}
      </div>
    </div>

    <div class="list-frame df ai-center jc-space-between">
      <div class="df ai-center">
        <img class="left-img" src="@/image/new_img/home/user_img/tel_bai.png" />
        <div class="title-frame">{{ t("userSet.phone") }}</div>
      </div>
      <div class="right-frame">
        {{ bankData.phone !== "" ? bankData.phone : "--" }}
      </div>
    </div>

    <div class="list-frame df ai-center jc-space-between">
      <div class="df ai-center">
        <img class="left-img" src="@/image/new_img/home/user_img/Email_bai.png" />
        <div class="title-frame">{{ t("userSet.mail") }}</div>
      </div>
      <div class="right-frame">
        {{ bankData.email !== "" ? bankData.email : "--" }}
      </div>
    </div>

    <div class="list-frame df ai-center jc-space-between">
      <div class="df ai-center">
        <img class="left-img" src="@/image/new_img/home/user_img/yinhangka_bai.png" />
        <div class="title-frame">{{ t("userSet.identity") }}</div>
      </div>
      <div class="right-frame">{{ bankData.cpfId !== "" ? bankData.cpfId : "--" }}</div>
    </div>

    <div class="list-frame df ai-center jc-space-between">
      <div class="df ai-center">
        <img class="left-img" src="@/image/new_img/home/user_img/yinhangka_bai.png" />
        <div class="title-frame">{{ t("userSet.corporateIdentity") }}</div>
      </div>
      <div class="right-frame">{{ bankData.cnpjId !== "" ? bankData.cnpjId : "--" }}</div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.accout-list-frame {
  width: 100%;
  height: auto;
}
.list-frame {
  width: calc(100% - 60px);
  height: 86px;
  margin-left: 30px;
  margin-bottom: 28px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 15px;
}
.title-frame {
  font-size: 22px;
  color: #ffffff;
  margin-left: 20px;
}
.left-img {
  width: 32px;
  height: 32px;
  margin-left: 30px;
}
.right-frame {
  font-size: 23px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 4px;
  margin-right: 30px;
}
</style>
